<template>
  <div class="auth">
    <div class="login">
      <div class="login-header">
        <h1>后台管理系统</h1>
        <p>欢迎登录，请填写您的账号信息</p>
      </div>
      <el-form ref="loginData" :model="loginData" status-icon :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="loginData.username" placeholder="请输入用户名" prefix-icon="User" size="large"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginData.password" type="password" placeholder="请输入密码" prefix-icon="Lock" size="large"
            show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width:100%" class="login-btn" type="primary" @click="login()"
            :loading="loading">安全登录</el-button>
        </el-form-item>

      </el-form>

      <!--       底部-->
      <!--      <div class="el-login-footer">-->
      <!--        <span>Copyright © 2018-2021 <a href="http://www.baidu.com" target="_blank">klhtz</a> All Rights Reserved.</span>-->
      <!--      </div>-->
    </div>
    <!-- <div class="login-background">
      <div class="particles">
        <div v-for="i in 15" :key="i" class="particle"></div>
      </div>
    </div> -->
  </div>

</template>


<script>
import router from '../router';
import api from "../network/api.js";

export default {
  data() {
    return {
      //登录的请求参数
      loginData: {
        username: '',
        password: '',
      },
      base64Image: "",
      loading: false,
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(e) {
      if (e.key === 'Enter') {
        this.login();
      }
    },
    async login() {
      // 进行表单校验
      this.$refs.loginData.validate(async (valid) => {
        if (valid) {
          // 表单校验通过，发起登录请求
          this.loading = true;
          try {
            const response = await api.auth_login(this.loginData);
            // 1. 确保响应存在
            if (!response) {
              throw new Error('服务器未返回响应');
            }
            const res = response.data; // 获取实际的数据部分
            // 3. 确保成功标志存在
            if (res.success === true) {
              this.$message({
                message: '登录成功！',
                type: 'success'
              });
              // 4. 确保 token 数据存在
              if (res.data && res.data.access_token) {
                // console.log('access_token:', res.data.access_token);
                // 保存 token
                const tokenKey = window.SystemConstant?.TOKEN_KEY || 'authToken';
                localStorage.setItem(tokenKey, res.data.access_token);
                // 保存用户名
                localStorage.setItem('userName', res.data.name);
                router.push({ name: 'home' }).then(() => {
                  window.location.reload();
                });
              } else {
                throw new Error('服务器返回的token缺失');
              }
            } else {
              // const errorMsg = res.msg || '登录失败，未知原因';

              this.$message.error('用户名或密码输入错误');
            }
          } catch (error) {
            console.error('登录请求失败:', error);
            // 详细的错误处理
            let errorMessage = '登录失败，请检查网络连接';
            if (error.response) {
              // 服务器返回了响应，但状态码不在 2xx 范围内
              console.error('响应数据:', error.response.data);
              console.error('响应状态:', error.response.status);
              errorMessage = `服务器错误: ${error.response.status}`;
              // 尝试获取服务器返回的错误消息
              if (error.response.data && error.response.data.msg) {
                errorMessage = error.response.data.msg;
              }
            } else if (error.request) {
              // 请求已发出但无响应
              console.error('请求信息:', error.request);
              errorMessage = '无法连接到服务器';
            } else {
              // 其他错误
              console.error('错误信息:', error.message);
              errorMessage = error.message || '登录过程出错';
            }
            this.$message.error(errorMessage);
          } finally {
            this.loading = false; // 隐藏加载状态
          }
        } else {
          // 表单校验未通过，不发起请求
          return;
        }
      });
    },


  }
}
</script>

<style lang="less" scoped>
.auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 4.5px);
  /* 减去顶部导航栏高度 */
  background-color: #f0f2f5;
  background-image: linear-gradient(120deg, #a1c4fd 10%, #c2e9fb 90%);
  position: relative;
  overflow: hidden;
  padding: 20px;
  /* 添加内边距防止内容贴边 */
}

.login {
  width: 90%;
  /* 使用百分比宽度 */
  max-width: 400px;
  /* 设置最大宽度 */
  padding: 30px 25px;
  /* 调整内边距 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  /* 增加背景不透明度 */
  border-radius: 12px;
  /* 增加圆角 */
  position: relative;
  margin: auto;
  /* 居中 */

  .login-header {
    text-align: center;
    margin-bottom: 25px;

    h1 {
      font-size: clamp(22px, 5vw, 28px);
      /* 响应式字体大小 */
      color: #2c3e50;
      margin-bottom: 8px;
      font-weight: 600;
      background: linear-gradient(45deg, #409EFF, #67C23A);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      font-size: clamp(12px, 3vw, 14px);
      /* 响应式字体大小 */
      color: #7f8c8d;
    }
  }
}

.login-form {
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }

  ::v-deep .el-input__inner {
    height: 48px;
    /* 增加输入框高度 */
    font-size: 16px;
  }

  .login-btn {
    width: 100%;
    font-size: 16px;
    height: 48px;
    /* 增加按钮高度 */
    margin-top: 5px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(119, 137, 156, 0.3);
    }
  }
}

/* 移动端特定样式 */
@media (max-width: 480px) {
  .auth {
    padding: 10px;
    min-height: calc(97vh);
    // background: #d19d9d;
    background-image: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  }

  .login {
    // width: 95%;
    padding: 25px 15px;

    .login-header {
      margin-bottom: 20px;
    }
  }

  .login-form {
    ::v-deep .el-input__inner {
      height: 44px;
      font-size: 15px;
    }

    .login-btn {
      height: 46px;
      font-size: 15px;
    }
  }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
  .login {
    padding: 20px 12px;

    .login-header h1 {
      font-size: 20px;
    }
  }

  .login-form {
    ::v-deep .el-input__inner {
      height: 42px;
    }
  }
}
</style>